<template>
  <div>
    <!-- 输入框区域 -->
    <div class="inputBox">
      <el-form :inline="true"
               :model="formInline"
               class="demo-form-inline">
        <div class="row row1">
          <el-form-item class="inputItem"
                        label="月子中心名称">
            <el-input class="inputbox"
                      v-model="formInline.user"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item class="inputItem"
                        label="所属地区">
            <el-select class="inputbox"
                       v-model="formInline.region"
                       placeholder="请选择">
              <el-option label="区域一"
                         value="shanghai"></el-option>
              <el-option label="区域二"
                         value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="inputItem"
                        label="公司名称">
            <el-input class="inputbox"
                      v-model="formInline.user"
                      placeholder="请输入"></el-input>
          </el-form-item>
        </div>
        <div class="row row2">
          <el-form-item class="inputItem"
                        label="合同状态">
            <el-input class="inputbox"
                      v-model="formInline.user"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item class="inputItem"
                        label="合作状态">
            <el-input class="inputbox"
                      v-model="formInline.user"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       class="search"
                       @click="onSubmit">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button plain
                       class="reset"
                       @click="onSubmit">重置</el-button>
          </el-form-item>
        </div>

      </el-form>
    </div>

    <!-- 表格区域 -->
    <div>
      <el-table :data="tableData"
                border
                style="width: 100%">
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column prop="yueziname"
                         label="月子中心名称"
                         width="180">
        </el-table-column>
        <el-table-column prop="area"
                         label="所属地区"
                         width="180">
        </el-table-column>
        <el-table-column prop="bed"
                         label="床位数">
        </el-table-column>
        <el-table-column prop="TV"
                         label="电视及网络情况"
                         width="120">
        </el-table-column>
        <el-table-column prop="contract_status"
                         label="合同状态"
                         width="300">
        </el-table-column>
        <el-table-column prop="cooperation_money"
                         label="合作金额"
                         width="120">
        </el-table-column>
        <el-table-column prop="payment_cycle"
                         label="付款周期"
                         width="120">
        </el-table-column>
        <el-table-column prop="cooperation_status"
                         label="合作状态"
                         width="120">
        </el-table-column>
        <el-table-column label="操作"
                         width="120">

        </el-table-column>

      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    }
  }

}
</script>

<style lang="less" scoped>
.inputBox {
  .el-form {
    .row {
      height: 50px;
      .el-form-item {
        margin-right: 30px;
        .el-button {
          width: 120px;
          height: 35px;
          margin-top: 15px;
          line-height: 2px;
        }
      }
    }
    .row1 {
      margin-left: 10px;
    }
    .row2 {
      margin-left: 30px;
    }
    /deep/.el-form-item__label {
      font-size: 12px;
    }
    /deep/.el-input__inner {
      height: 30px;
    }
  }
}
</style>
